<template>
  <el-dialog :visible.sync="visible" width="1200px">
    <XmTable :config="{
      ...tableConfig,
      columns: getColumns()
    }" :noWatchParams="noWatchParams" class="table" ref="table">
      <div slot="filter">
        <div class="tablist">
          <span class="name" v-for="(item, index) in tabs"
            :class="{ active: (noWatchParams.productionProcess === item.value) }" @click="onChangeState(item)"
            :key="index">{{ item.name }}</span>
        </div>

        <el-form :inline="true" class="pl-20" v-if="noWatchParams.productionProcess === '0'">
          <el-form-item label="时间" style="margin-bottom: 0px !important;">
            <el-date-picker v-model="time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" size='small'
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetch" size='small' plain icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-productionProcessName" slot-scope="{data}">
        <span>
          {{data.productionProcess === 1 ? '备款蛋糕' : data.productionProcessName}}
        </span>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button type="text" size="mini" @click="productionSelect(data)" v-if="noWatchParams.productionProcess === '6'">
          已查阅
        </el-button>
        <el-button type="text" size="mini" @click="showLog(data)">
          查看日志
        </el-button>
      </template>
    </XmTable>

    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
  </el-dialog>
</template>

<script>
import { tableConfig } from './config'
import orderLogDialog from '@/components/dialog/orderLogDialog'
import {
  clearNewsLogRecord,
} from "@/api/orderDispatch";
const tabs = [
  //标签数据
  {
    name: "异常工单列表",
    value: '6'
  },
  {
    name: "异常工单记录",
    value: '0'
  }
]

export default {
  props: {
    warehouseId: {
    },
  },
  components: {
    orderLogDialog
  },
  data() {
    return {
      visible: false,
      tableConfig,
      tabs,
      time: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString()
      ],
      noWatchParams: {
        cityId: JSON.parse(window.localStorage.getItem("saber-areaId")).content,
        startTime: '',
        endTime: '',
        productionProcess: '6',
        category: '0', // 蛋糕
        newsType: '3,4',
      }
    }
  },
  methods: {
    show() {
      this.visible = true
      this.noWatchParams.productionProcess = '6'
      this.fetch()
    },
    fetch() {
      this.noWatchParams = this.getParams()
      this.$nextTick(() => {
        this.$refs.table && this.$refs.table.fetch()
      })
    },
    getParams() {
      const params = {
        ...this.noWatchParams,
        warehouseId: this.warehouseId,
        startTime: undefined,
        endTime: undefined,
      }
      if (this.time && this.noWatchParams.productionProcess === '0') {
        params.startTime = this.dayjs(this.time[0])
          .format("YYYY-MM-DD")
          .toString()
        params.endTime = this.dayjs(this.time[1])
          .format("YYYY-MM-DD")
          .toString()
      }
      return params
    },
    onChangeState(item) {
      this.noWatchParams.productionProcess = item.value
      this.fetch()
    },
    productionSelect(data) {
      let params = {
        id: data.id,
        newsType: data.newsType
      }
      clearNewsLogRecord(params).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: "操作成功！",
          });
          this.fetch()
          this.$emit('productionSelect')
        } else {
          this.$message({
            type: "error",
            message: res.data.msg || "操作失败！",
          });
        }
      })
    },
    getColumns() {
      return this.noWatchParams.productionProcess === '6' ?
      this.tableConfig.columns.filter(item => {
        return item.prop != 'productionProcessName'
      }) : this.tableConfig.columns
    },
    showLog(data) {
      this.$refs.orderLogDialog.show({orderId: data.orderId})
    }
  }
}
</script>

<style lang="scss" scoped>
.tablist {
  display: flex;
  margin-bottom: 20px;

  .name {
    padding: 0 20px;
    text-align: center;
    color: #000;
    line-height: 40px;
    cursor: pointer;
    font-size: 16px;

    &.active {
      color: #43a0ff;
      border-bottom: 1px solid #43a0ff;
    }
  }
}
</style>
